import { defineComponent, onMounted, reactive, watch } from "vue";
import styles from "./orderList.module.scss";
import { $orderSingleList } from "@/apis/api";
import to from "await-to-js";
import { useStore as useIndexStore } from "@/store/index";
import { $wechatJssdkConfig } from "@/apis/api";
import { useRouter } from "vue-router";
import usePay from "@/hooks/usePay";
import NeedLogin from "@/components/NeedLogin/NeedLogin";
import { useStore as useUserStore } from "@/store/user";
export default defineComponent({
  setup() {
    const userStore = useUserStore();
    const pay = usePay();
    const router = useRouter();
    const indexStore = useIndexStore();
    const navbarState = reactive({
      list: [
        {
          label: '全部',
          value: undefined,
        },
        {
          label: '已支付',
          value: 1,
        },
        {
          label: '待支付',
          value: 0,
        },
      ],
      actived: undefined as number | undefined,
    })
    const navChange = (actived: number | undefined) => {
      navbarState.actived = actived;
      refresh();
    }
    const Navbar = () => (
      <div class={styles.navbar}>
        {
          navbarState.list.map((item) => (
            <div class={[styles['navbar-item'], navbarState.actived === item.value && styles.actived]} onClick={() => { navChange(item.value) }}>
              <span>{item.label}</span>
            </div>
          ))
        }
      </div>
    )
    const order = reactive({
      refresh: false,
      moreLoading: false,
      hasMore: true,
      page: 1,
      limit: 10,
      total: 0,
      list: [],
    })
    const getList = async () => {
      if (!order.hasMore) {
        return;
      }
      const [err, res]: any = await to($orderSingleList({ pay_status: navbarState.actived, page: order.page, limit: order.limit }));
      if (!err) {
        order.list = order.list.concat(res.data.data);
        order.total = res.data.total;
        order.list.length >= order.total && (order.hasMore = false);
        order.page++;
      }
      order.refresh = false;
      order.moreLoading = false;
    }
    onMounted(() => {
      getList();
      const url = window.location.href.split("#")[0];
      $wechatJssdkConfig({
        url,
      }).then((res: any) => {
        window.wx.config(res.data);
      })
    })
    watch(() => userStore.notLogin, (nv) => {
      if (!nv) {
        getList();
      }
    }, {
      deep: true,
      immediate: false,
    })
    const init = () => {
      order.moreLoading = false;
      order.hasMore = true;
      order.page = 1;
      order.total = 0;
      order.list = [];
    }
    const refresh = () => {
      init();
      getList();
    }
    const loadMore = () => {
      getList();
    }
    const toDetail = (item: any) => {
      router.push(`/orderDetail?order_no=${item.order_no}`);
    }
    return () => (
      <div class={styles.orderList}>
        <Navbar />
        <div class={styles.container}>
          <nut-infinite-loading v-model={order.moreLoading} has-more={order.hasMore} onLoadMore={() => loadMore()}>
            <nut-pull-refresh v-model={order.refresh} onRefresh={() => { refresh() }}>
              <div class={styles['order-list']}>
                {
                  order.list.map((item: any, index: number) => (
                    <div class={styles['order-item']}>
                      <div class={styles['item-header']}>
                        <span class={styles['name']}>{indexStore.info.name}</span>
                        <div class={[item.pay_status.label === 0 && styles['status0'], item.pay_status.label === 1 && styles['status1'], styles['status']]}>{item.pay_status.value}</div>
                      </div>
                      <div class={styles['item-container']}>
                        <div class={styles['item-row']}>
                          <span class={styles['row-label']}>订单号</span>
                          <span class={styles['row-value']}>{item.order_no}</span>
                        </div>
                        <div class={styles['item-row']}>
                          <span class={styles['row-label']}>参保人</span>
                          <span class={styles['row-value']}>{item.insured_name}</span>
                        </div>
                        <div class={styles['item-row']}>
                          <span class={styles['row-label']}>订单时间</span>
                          <span class={styles['row-value']}>{item.create_time}</span>
                        </div>
                        <div class={styles['item-row']}>
                          <span class={styles['row-label']}>订单金额</span>
                          <span class={styles['row-value']}>{item.sum_premium}元</span>
                        </div>
                      </div>
                      <div class={styles['item-footer']}>
                        <span class={styles['label']}>操作</span>
                        <div class={styles['btns']}>
                          {
                            item.pay_status.label === 0 && (
                              <div class={styles['btn']} onClick={() => { pay.submit(item.out_trade_no, item.order_no) }}>去支付</div>
                            )
                          }
                          <div class={styles['btn']} onClick={() => { toDetail(item) }}>查看详情</div>
                        </div>
                      </div>
                    </div>
                  ))
                }
              </div>
            </nut-pull-refresh>
          </nut-infinite-loading>
        </div >
        <NeedLogin />
      </div >
    )
  }
})